<template>
  <div class="ai-settings-page">
    <div class="page-header">
      <h3>AI配置管理</h3>
      <el-button type="primary" @click="saveAllSettings" :loading="saving">
        保存所有设置
      </el-button>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 基础配置 -->
      <el-tab-pane label="基础配置" name="basic">
        <AISettings @close="() => {}" />
      </el-tab-pane>

      <!-- 模型管理 -->
      <el-tab-pane label="模型管理" name="models">
        <ModelManagement />
      </el-tab-pane>

      <!-- 提示词模板 -->
      <el-tab-pane label="提示词模板" name="prompts">
        <PromptTemplates />
      </el-tab-pane>

      <!-- 功能配置 -->
      <el-tab-pane label="功能配置" name="features">
        <FeatureConfig />
      </el-tab-pane>

      <!-- API配置 -->
      <el-tab-pane label="API配置" name="api">
        <APIConfig />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import AISettings from './components/AISettings.vue'
import ModelManagement from './components/ModelManagement.vue'
import PromptTemplates from './components/PromptTemplates.vue'
import FeatureConfig from './components/FeatureConfig.vue'
import APIConfig from './components/APIConfig.vue'

const activeTab = ref('basic')
const saving = ref(false)

const saveAllSettings = () => {
  saving.value = true
  setTimeout(() => {
    ElMessage.success('所有设置已保存')
    saving.value = false
  }, 500)
}
</script>

<style scoped lang="scss">
.ai-settings-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    margin: 0;
    color: #303133;
  }
}
</style>
